<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%@include file="include.jsp"%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/page.css">
</head>
<body>
<table style="margin:20px 20px;font-size: 13px;width: 100%">
   <tr>
       <th><input type="checkbox" id="selectAll" class="cb" onclick="selectToggle()"></th>
       <th>商品图片</th>
       <th>商品名称</th>
       <th>商品价格</th>
       <th>商品库存</th>
       <th>商品类型</th>
   </tr>
    <c:forEach items="${pageInfo.list}" var="c">
        <tr class="ctr">
            <td>
                <input type="checkbox" class="cb">
            </td>
            <td>
                <img src="/img/${c.pic}" style="width: 60px;height: 60px">
            </td>
            <td>
                ${c.name}
            </td>
            <td>
                ${c.price}
            </td>
            <td>
                ${c.repertory}
            </td>
            <td>
                ${c.type}
            </td>
        </tr>
    </c:forEach>
</table>


<div style="text-align: center;margin:10px auto;">
    <div id="pager" class="pager clearfix">
    </div>
</div>
</body>


<script src="${pageContext.request.contextPath}/js/jquery.z-pager.js"></script>
<script>
    $.fn.zPager.defaults = {
        totalData: ${pageInfo.total}, //数据总条数
        pageData: 7, //每页数据条数
        pageCount: ${pageInfo.pages}, //总页数
        current: ${pageInfo.pageNum}, //当前页码数
        pageStep: 8, //当前可见最多页码个数
        minPage: 5, //最小页码数，页码小于此数值则不显示上下分页按钮
        active: 'current', //当前页码样式
        prevBtn: 'pg-prev', //上一页按钮
        nextBtn: 'pg-next', //下一页按钮
        btnBool: true, //是否显示上一页下一页
        firstBtn: 'pg-first', //第一页按钮
        lastBtn: 'pg-last', //最后一页按钮
        btnShow: true, //是否显示第一页和最后一页按钮
        disabled: true, //按钮失效样式
        ajaxSetData: true, //是否使用ajax获取数据 此属性为真时需要url和htmlBox不为空
        url: '', //ajax路由
        htmlBox: '' //ajax数据写入容器
    }
</script>
<script type="text/javascript">
    $("#pager").zPager({
        totalData: ${pageInfo.total},
        htmlBox: $('#wraper'),
        btnShow: true,
        ajaxSetData: false
    });
    function currentPage(currentPage){
        /*
            触发页码数位置： Page/js/jquery.z-pager.js 64行
        */

        if (currentPage != ${pageInfo.pageNum}){
            topage(currentPage)
        }
        console.log("当前页码数：" + currentPage);
    }
</script>
</html>
